<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui" 
      xmlns:f="http://xmlns.jcp.org/jsf/core">


     <h:head >
        <link rel="stylesheet" href="css_user.css" type="text/css"/>
        <title>Create a New Event</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </h:head>
    <h:body>
        <p:layout style="min-width:1000px;min-height:1000px;">
            <p:layoutUnit position="west" resizable="true" size="220" minSize="80" maxSize="300">
                    <h:form id="button">
                        <br></br>
                        <p:commandButton id="viewPersonal" value="Personal Page" action="#{searchUserBean.uploadPersonalPage()}" ajax="true" style="width:200px;height:50px;margin-left: 5px;margin-right: 5px">  
                        </p:commandButton>
                        <br></br><br></br>
                        <p:commandButton id="newEvent" value="New Event" action="new-event" ajax="true" style="width:200px;height:50px;margin-left: 5px;margin-right: 5px">
                        </p:commandButton>
                        <br></br><br></br>
                        <p:commandButton id="searchUser" value="Browse User" action="#{searchBean.browseUsers()}" ajax="true" style="width:200px;height:50px;margin-left: 5px;margin-right: 5px">
                        </p:commandButton>
                        <br></br><br></br>
                        <p:commandButton id="searchEvent" value="Search Event" action="search-event-page" ajax="true" style="width:200px;height:50px;margin-left: 5px;margin-right: 5px">  
                        </p:commandButton>
                        <br></br><br></br>
                        <p:commandButton id="logout" value="Logout" action="#{loginBean.logout()}" style="width:200px;height:50px;margin-left: 5px;margin-right: 5px">
                        </p:commandButton>
                        <br></br><br></br>
                        <p:commandButton id="mainPage" value="Main Page" action="main-page?faces-redirect=true" style="width:200px;height:50px;margin-left: 5px;margin-right: 5px">
                        </p:commandButton>
                        </h:form>
                </p:layoutUnit>
            
            <p:layoutUnit position="center" resizable="true" size="700" minSize="100" maxSize="600">
                <h:form id="new_event">
                    <p:growl id="growl" autoUpdate="true" showSummary="false" redisplay="false" showDetail="true" sticky="true" />  
                    <p:panel id='newPanel' header='New Event Details' style="border: none">
                    <h:panelGrid columns="2" id='newEventForm' styleClass="panelGridCenter" style="border-color: #ffffff;width: 800px;width:100%" cellpadding="11" columnClasses="label,value">
                    
                    <h:outputLabel style="font-weight: bold;" for="name">Name:</h:outputLabel>
                    <p:inputText id="name" value="#{eventBean.event.name}" required="true" requiredMessage="Insert a Name for this event">
                    <p:watermark for="name" value="New Event" />
                    </p:inputText>
                    
                    <h:outputLabel style="font-weight: bold;" for="description">Description:</h:outputLabel>
                    <p:inputTextarea id="description" value="#{eventBean.event.description}" >
                    <p:watermark for="description" value="Insert here some information about the event" />
                    </p:inputTextarea>
                  
                    <h:outputLabel style="font-weight: bold;" for="st_date">Starting Date:</h:outputLabel>
                    <p:calendar id="st_date" value="#{eventBean.stDate}" navigator="true" mode="popup" showOn="button" mindate="#{eventBean.stDate_lowerBound}" requiredMessage="Insert a Starting Date for this event" required="true">
                        <p:ajax event="dateSelect" listener="#{eventBean.changeEnDate_lowerBound}" update="en_date"  />
                        <p:watermark for="st_date" value="Chose a day" />
                    </p:calendar>
                    
                    <p:outputLabel style="font-weight: bold;" for="st_time">Starting Time:</p:outputLabel>
                    <p:calendar id="st_time" value="#{eventBean.stTime}" timeOnly="true" pattern="HH:mm" required="true" requiredMessage="Insert a Starting Time for this event" >
                    <p:watermark for="st_time" value="Insert when the event starts" />
                    </p:calendar>
                                      
                    <h:outputLabel style="font-weight: bold;" for="en_date">Ending Date:</h:outputLabel>
                    <p:calendar id="en_date" value="#{eventBean.enDate}" navigator="true" mode="popup" showOn="button" mindate="#{eventBean.enDate_lowerBound}" required="true" requiredMessage="Insert a Ending Date for this event" >
                    <p:watermark for="en_date" value="Chose a day"  />
                    </p:calendar>
                    
                    <p:outputLabel style="font-weight: bold;" for="en_time">Ending Time:</p:outputLabel>
                    <p:calendar id="en_time" value="#{eventBean.enTime}" timeOnly="true" pattern="HH:mm" required="true" requiredMessage="Insert a Ending time for this event">
                    <p:watermark for="en_time" value="Insert when the events ends"  />
                    </p:calendar>
                    
                    <p:outputLabel style="font-weight: bold;" for="place">Place:</p:outputLabel>
                    <p:inputText id="place" value="#{eventBean.event.place}" required="true" requiredMessage="Insert a City for this event">
                    <p:watermark for="place" value="Insert here a city" />
                    </p:inputText>
                    
                    <p:outputLabel style="font-weight: bold;" for="type">Location Type:</p:outputLabel>
                    <p:selectOneRadio id="type" value="#{eventBean.event.type}" layout="lineDirection" required="true" requiredMessage="Specify if is an outdoor or indoor event">
                        <f:selectItem itemLabel="Indoor" itemValue="false" />
                        <f:selectItem itemLabel="Outdoor" itemValue="true" />
                        <p:ajax update="bad_weather" />
                    </p:selectOneRadio>               
                    
                    <p:outputLabel  style="font-weight: bold;" for="bad_weather">What has to be considered bad Weather? <br></br> (Only for outdoor events)
                    </p:outputLabel>
                    <p:selectManyCheckbox disabled="#{! eventBean.event.type}" id="bad_weather" value="#{eventBean.badSelected}" layout="grid" columns="3">
                        <f:selectItems value="#{eventBean.weatherList}" var="weather" itemLabel="#{weather}" itemValue="#{weather}" />
                    </p:selectManyCheckbox>
                    
                    <p:outputLabel style="font-weight: bold;" for="p_level">Privacy Level:</p:outputLabel>
                    <p:selectOneRadio id="p_level" value="#{eventBean.event.privacyLevel}" layout="lineDirection" required="true" requiredMessage="Specify if this event will be public or not">
                        <f:selectItem itemLabel="Public" itemValue="true" />
                        <f:selectItem itemLabel="Private" itemValue="false" />
                    </p:selectOneRadio>
                    
                    <p:outputLabel style="font-weight: bold;" for="participants">Participants:</p:outputLabel>
                    <h:panelGrid id="participants" columns="1">
                        <p:autoComplete value="#{eventBean.pendingUser}" 
                                        completeMethod="#{eventBean.completeUser}" 
                                        multiple="true"
                                        var="user" 
                                        itemLabel="#{user.username}"
                                        itemValue="#{user.username}"
                                        forceSelection="true"> 
                            <p:ajax event="itemSelect" listener="#{eventBean.addToPending}" update="pending_users"  />
                        </p:autoComplete>
                        <p:dataList id="pending_users" value="#{eventBean.invitations}" var="user" itemType="disc" rendered="false" > 
                        </p:dataList>
                    </h:panelGrid>
                        <f:facet name="footer">
                        <p:commandButton id="submit" value="Add Event" update="new_event" action="#{eventBean.addEvent()}" ajax="false" global="true" style="width:200px;height:50px;margin-left: 5px;margin-right: 5px"/>
                        </f:facet>
                    </h:panelGrid>
                    </p:panel>
                </h:form>
            </p:layoutUnit>
        </p:layout>
    </h:body>
</html>

